<template>
  <div class="box">
    <div class="search">
      <div class="items">
        <el-input type="text" placeholder="产品编号" v-model="proID"></el-input>
        <el-button class="el-icon-search" type="success" @click="search(proID)">搜索</el-button>
      </div>
    </div>
    <el-table :data="tableData" border style="width: 100%" height=400>
      <el-table-column prop="proID" label="产品编号" width="100">
      </el-table-column>
      <el-table-column prop="proName" label="商品名称" width="150">
      </el-table-column>
      <el-table-column prop="supplier" label="供应商编号" width="300">
      </el-table-column>
      <el-table-column prop="inPrice" label="进价" width="100"> </el-table-column>
      <el-table-column prop="outPrice" label="售价"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row.proID)" type="danger" icon="el-icon-delete"
            ></el-button
          >
          <el-button type="primary"  @click="tolink(scope.row.proID)" icon="el-icon-edit"></el-button>
        </template>
      </el-table-column>
    </el-table>
     <div class="new">
        <el-button type="success" plain icon="el-icon-circle-plus-outline" @click="addNew">新增产品</el-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import qs from 'qs'
export default {
  methods: {
     handleClick(id) {
     
      this.$confirm('此操作将永久删除该条信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios({
            url:'http://localhost:3000/deleteP',
            method:'post',
            data:qs.stringify({
              id:id
            })
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          location.reload()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    tolink(id) {
      this.$router.push({path:"editProduct",query:{i:id}});
    },
    addNew(){
      this.$router.push('/addProduct')
    },
    search(id){
      axios({
        url:'http://localhost:3000/searchP',
        method:'post',
        data:qs.stringify({
          id:id
        })
      }).then((success)=>{
          this.tableData=success.data[0]
      })
    }
  },

  data() {
    return {
      tableData: [{}],
      proID:''
    };
  },
  mounted() {
    axios({
      url: "http://localhost:3000/product",
      method: "get",
    }).then((succ) => {
      this.tableData = succ.data;
    });
  },
};
</script>
<style  scoped>
.box {
  overflow: auto;
}
.search {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.items {
  display: flex;
  width: 300px;
}
</style>